<template>
    <div class="fullMain">
        <x-header :left-options="{backText: '',showBack: false}" >
          疫情汇报
        </x-header>
        <div style="height:20px"/>
        <!--插入验证提示框-->
        <div v-transfer-dom>
        <alert v-model="isShowAlert" > {{alertText}}</alert>
      </div>
        <div class="mainbBg">
            <div class="menuHeader">
                <i class="fa fa-chevron-left mT returnIcon" @click="back"></i>
                <span class="ids">姓名：{{ userInfo.detail.name}}</span>
            </div>
            <!-- 筛选框 -->
            <group style="margin-top:-25px">
                <popup-radio class="popupradio-custom" :placeholder='placeholderOfgGroup' v-model="group" :options="allGroups"
                            @on-show="getAllGroups"
                             style="float:left;max-width: 35%;padding-left: 10px;padding-right: 5px"></popup-radio>
                <calendar placeholder="时间选择" title="" v-model="choseDate"
                          :show-next-month="false" :show-last-month="false" :end-date="today"
                          style="float:left;width:auto;max-width: 35%;" ></calendar>
                
                <button type="button" class="myButton" @click="restoreDefault">恢复默认</button>
                <!-- <button v-if="this.choseDate!==''" type="button" class="myButton" @click="restoreDefault">导出数据</button> -->
                <!-- <button type="button" class="myButton" @click="getData">筛选</button> -->
              </group>

            <div v-for="(item,index) in epidemicSummaryResult" :key = "index">
                <div >
                    <card :header="head(item.date)" @on-click-header = "onClickHeader(index)">
                        <div slot="content" class="card-demo-flex card-demo-content01"  >
                            <div class="vux-1px-r">
                            <span>{{item.suspected}}</span>
                            <br/>
                            有不适症状
                            </div>
                            <div class="vux-1px-r">
                            <span>{{item.finished - item.suspected}}</span>
                            <br/>
                            无不适症状
                            </div>
                            <div class="vux-1px-r">
                            <span>{{item.unfinished.length}}</span>
                            <br/>
                            未汇报人数
                            </div>
                            <div class="vux-1px-r">
                            <span>{{item.total}}</span>
                            <br/>
                            总人数
                            </div>
                        </div>
                    </card>
                    <div class="groupDiv" 
                    style="margin-top: 3px;height:calc(100% - 240px);overflow:auto;width:100%;">
                        <div class="chatDiv" style="line-height:20px;width: 100%;float: left ">
                            <div v-if="item.unfinished.length !== 0">
                                未汇报：
                                <span v-for="(item_unfinished,index_unfinished) in item.unfinished" :key = "index_unfinished">
                                    {{item_unfinished}}
                                </span>
                            </div>
                        </div>
                        <!-- <div class="chatDiv" style="line-height:20px;width: 100%;float: left ">
                            <div v-if="item.unfinished.length !== 0">
                                所填地址与定位不同：
                                <span v-for="(item_unfinished,index_unfinished) in item.unfinished" :key = "index_unfinished">
                                    {{item_unfinished}}
                                </span>
                            </div>
                        </div> -->
                        <div class="chatDiv" v-for="(item_in,index_in) in item.stat" :key="index_in"
                            style="line-height:20px;width: 100%;float: left ">
                            <div>
                                {{item_in.userName}}：<br>
                                <!-- <br>
                                联系方式：18328090433 -->
                                导师：{{tranContent(item_in.detail).teacher}}<br>
                                体温：{{tranContent(item_in.detail).temperature}}°C
                                <!-- <div v-if="tranContent(item.content).has(isWorkOutOfChengdu) && tranContent(item.content).isWorkOutOfChengdu === true">
                                  在外实习
                                </div>
                                <div v-if="tranContent(item.content).has(isWorkOutOfChengdu) && tranContent(item.content).isWorkOutOfChengdu === false">
                                  未在外实习
                                </div> -->
                                <div>
                                    有不适症状：{{tranContent(item_in.detail).description}}
                                </div>
                                    汇报地点：{{tranContent(item_in.detail).place}}
                            </div>
                        </div>
                    </div>
                </div>
               
            </div>
        </div>
    </div>
</template>

<script>
  import { XHeader,Card, Group, Calendar, PopupRadio  } from 'vux'
  import {mapState} from 'Vuex'
  import epidemic from 'api/epidemic_stat'
  import group from 'api/group'
   

  export default {
    name: "T_personalcenter",
    data() {
      return {
        alertText: '', // 验证提示框的文本
        isShowAlert: false, // 是否显示验证提示,
        allGroups: [], // 存放所有分组
        group: '',
        placeholderOfgGroup:'',
        choseDate:'', // 时间选择
        today: '',
        epidemicSummaryResult:[],


      }
    },
    computed:{
      ...mapState({
        userInfo: state => state.user.userInfo
      }),
      isShowCard(){
        let length = this.epidemicSummaryResult.length
        console.log(length)
        let arr = []
        let index,isShow
        for(index=0 ; index < length; ++index){
            isShow = true
            let minArr = {index:index,isShow:isShow}
            arr.push(minArr)
        }
        return arr
      },
      
    },
    mounted(){
      this.$store.dispatch('getUserInfo')
      this.getAllGroups()
      this.getData()
      this.setToday ()

    },
    watch: {
        group (val) {
            this.getData()
        },
        choseDate (val) {
            this.getData()
        }
    },
    methods:{
      back(){
        this.$router.go(-1);
      },
      showAlert (alertText) {
        this.isShowAlert = true
        this.alertText = alertText
      },
      closeTip () {
        this.isShowAlert = false
        this.alertText = ''
      },
      setToday () {
        let now = new Date()
        let cmonth = now.getMonth() + 1
        let day = now.getDate()
        if (cmonth < 10) cmonth = '0' + cmonth
        if (day < 10) day = '0' + day
        this.today = now.getFullYear() + '-' + cmonth + '-' + day
      },
      restoreDefault(){
        this.choseDate = ''
      },
      head(dateStr){
        return {title:dateStr}
      },
      onClickHeader(index){
        this.isShowCard[index].isShow = !this.isShowCard[index].isShow
        return this.isShowCard[index].isShow
      },
      judgeIsShow(index){
        console.log("judgeIsShow(index)::" + index)
        console.log("judgeIsShow::" + this.isShowCard[index].isShow)
        return this.isShowCard[index].isShow
      },
      // 获取分组
      async getAllGroups () {
          this.allGroups.length = 0
          let labName = this.userInfo.labName
          let tempGroups = await group.getGroupsUnderControl()
          if (tempGroups.code === 0) {
            console.log('没有获取到分组')
        } else {
            let key, value
            this.group = tempGroups.data[0].groupId
            this.placeholderOfgGroup = tempGroups.data[0].detail.groupName
            tempGroups.data.forEach(element => {
            key = element.groupId
            value = element.detail.groupName
            this.allGroups.push({key, value})
            })
        }
      },
      async getData () {
        this.epidemicSummaryResult.length = 0
        let result
        if(this.choseDate === ''){
            result = await epidemic.getEpidemicStatRecentSeven(this.group)
            if (result.code === 0){
            this.showAlert('查询失败，请重试。')
            }else{
                this.epidemicSummaryResult = result.data
            }
        }else{
            result = await epidemic.getEpidemicStatOneDay(this.group,this.choseDate)
            if (result.code === 0){
                this.showAlert('查询失败，请重试。')
            }else{
                let arr = []
                arr.push(result.data)
                this.epidemicSummaryResult = arr
                
                for(let i = 0;i < this.epidemicSummaryResult.length;++i){
                    console.log(this.epidemicSummaryResult[i])
                }
                console.log("-------------------------")
                
            }
        }
        
      },
      tranContent(content){
        return JSON.parse(content) 
      },











    },
    components:{
      XHeader,
      Card,
      Group, 
      Calendar, 
      PopupRadio,
       
    }
  }
</script>
<style>
.card-demo-flex {
  display: flex;
}
.card-demo-content01 {
  padding: 10px 0;
}
.card-padding {
  padding: 15px;
}
.card-demo-flex > div {
  flex: 1;
  text-align: center;
  font-size: 12px;
}
.card-demo-flex span {
  color: #f74c31;
}
/* 一键提醒 */
.remind{
    background-color: #1abc9c;
    color: white;
    border: none;
    border-radius: 5px;
    padding: 5px;
}
popup-radio {
    float: left;
    height: 20px;
    width: 20%;
    margin-right: 10px;
  }
/* 筛选框 */
.myButton {
    float: right;
    width: auto;
    height: 30px;
    border: none;
    font-size: 14px;
    border-radius: 10px;
    margin: 5px 10px;
    color: #fff;
    background: #1abc9c;
  }
</style>